<template>
  <div class="login-register-container">
    <el-card class="box-card">
      <div class="header">
        惊喜一餐
      </div>
      <el-tabs v-model="activeTab" type="border-card" class="tabs">
        <el-tab-pane label="登录" name="login">
          <el-form :model="loginForm" @submit.native.prevent="handleLogin" class="form" label-width="80px">
            <el-form-item label="用户名" class="form-item">
              <el-input v-model="loginForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" class="form-item">
              <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleLogin" class="button">登录</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="注册" name="register">
          <el-form :model="registerForm" @submit.native.prevent="handleRegister" class="form" label-width="80px">
            <el-form-item label="用户名" class="form-item">
              <el-input v-model="registerForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" class="form-item">
              <el-input v-model="registerForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" class="form-item">
              <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" class="form-item">
              <el-input type="password" v-model="registerForm.confirmPassword" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleRegister" class="button">注册</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import {useRouter} from 'vue-router';
import {login, register} from "@/api/user/index";

const router = useRouter();

const activeTab = ref('login');

const loginForm = ref({
  name: '',
  password: ''
});

const registerForm = ref({
  name: '',
  email: '',
  password: '',
  confirmPassword: ''
});

const handleLogin = async () => {
  try {
    const response = await login(loginForm.value);
    console.log("/users/login  response  ", response);
    if (response.code === 200) {
      ElMessage.success('登录成功');
      router.push('/');
    } else {
      ElMessage.error(response.message);
    }
  } catch (error) {
    ElMessage.error('登录请求失败，请稍后重试');
  }
};

const handleRegister = async () => {
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    ElMessage.error('密码不匹配');
    return;
  }
  const response = await register(registerForm.value);
  console.log("/users/register  response  ", response);
  if (response.code !== 200) {
    ElMessage.error('注册失败，请检查用户名或邮箱是否已存在');
    return;
  } else {
    ElMessage.success('注册成功');
    router.push('/');
  }
};
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

.login-register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #1e90ff 30%, #00bfff 70%);
}

.header {
  text-align: center;
  font-size: 36px;
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  color: #1e90ff;
  margin-bottom: 20px;
}

.box-card {
  width: 400px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  background-color: white;
  padding: 20px;
}

.tabs {
  margin-top: 20px;
}

.form {
  padding: 20px;
}

.form-item {
  margin-bottom: 20px;
}

.button {
  width: 100%;
  background-color: #1e90ff;
  border-color: #1e90ff;
  transition: background-color 0.3s, transform 0.3s;
}

.button:hover {
  background-color: #00bfff;
  transform: translateY(-2px);
}
</style>